<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div class="Catalogbar">
          <span class="catalog">目录名称</span>
          <el-input v-model="input"></el-input>
          <span class="state">状态</span>
          <el-select v-model="select" slot="prepend" placeholder="请选择">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="2"></el-option>
          </el-select>
          </el-input>
          <el-row>
            <el-button>清除</el-button>
            <el-button type="primary">搜索</el-button>
            <el-button class="Newdirectory" type="success"><i class="el-icon-edit"></i>新增目录</el-button>
          </el-row>
          
        </div>
        <!-- 中间灰色条条 -->
        <div class="grey" >
          <p <i class="el-icon-info"></i>数据一共{{}}条</p>
        </div>
        <template>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="Serialnumber" label="序号" width="100">
            </el-table-column>
            <el-table-column prop="Directoryname" label="所属学科" width="200">
            </el-table-column>
            <el-table-column prop="Directoryname" label="目录名称" width="190">
            </el-table-column>
            <el-table-column prop="creator" label="创建者" width="190">
            </el-table-column>
            <el-table-column prop="Creationdate" label="创建日期" width="190">
            </el-table-column>
            <el-table-column prop="Numberofinterviewquestions" label="面试题数量" width="190">
            </el-table-column>
            <el-table-column prop="state" label="状态" width="190">
            </el-table-column>
            <el-table-column prop="operation" label="操作" width="190">
              <el-button type="text">禁用</el-button>
              <el-button type="text" disabled>修改</el-button>
              <el-button type="text" disabled>删除</el-button>
            </el-table-column>
          </el-table>
        </template>
        <el-pagination background layout="prev, pager, next" :total="1000">
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>

<script>
import { list as getCompanys } from '@/api/hmmm/companys'
import { list as getQuestion } from '@/api/hmmm/questions'

export default {
  data() {
    return {
      input: '',
      tableData: [
        {
          Serialnumber: 1,
          Directoryname: '大数据',
          creator: '管理员',
          Creationdate: 1,
          Numberofinterviewquestions: 8,
          state: '已启用'
        },
         {
          Serialnumber: 1,
          Directoryname: '大数据',
          creator: '管理员',
          Creationdate: 1,
          Numberofinterviewquestions: 8,
          state: '已启用'
        }, {
          Serialnumber: 1,
          Directoryname: '大数据',
          creator: '管理员',
          Creationdate: 1,
          Numberofinterviewquestions: 8,
          state: '已启用'
        },
      ]
    }
  },

  created() {
    getCompanys()
    getQuestion()
  }
}
</script>

<style scoped>
.Catalogbar {
  display: flex;
  position: relative;
  /* justify-content: space-between; */
}
.catalog {
  padding-left: 5px;
  padding-top: 10px;
}
.state {
  padding-left: 42px;
  padding-top: 10px;
}
.el-select {
  width: 234px;
  height: 38px;
  padding-left: 15px;
}
.el-input {
  width: 234px;
  height: 38px;
  padding-left: 15px;
}
.el-button {
  margin-left: 13px;
}
.Newdirectory {
  margin-left: 510px;
  position: absolute;
  top: 0;
  right: -666px;
}
.grey{
  width: 100%;
  height: 30px;
  background-color:  rgb(224, 222, 222);
  /* display: inline-block; */
  padding-top: 7px;
  padding-left: 10px;
  margin-top: 10px; 
  margin-bottom: 15px; 
  display: flex;
 
}
.el-icon-info{
  padding-right: 8px;
}
</style>
